<template>
  <div class="home">
    <Layout>
      <!--
      hide-trigger       隐藏默认触发器 左侧下面的 < 触发器
      collapsible        是否可收起，设为false后，默认触发器会隐藏，且响应式布局不会触发
      collapsed-width	    收缩宽度，设置为 0 会出现特殊 trigger
      -->
      <!--左侧 侧边栏-->
      <Sider ref="side"
             hide-trigger
             collapsible
             :collapsed-width="80"
             v-model="isCollapsed"
             width="150"
             :style="{minHeight:'100vh'}">
        <!--  accordion 手风琴，每次展开一个 -->
        <Menu theme="dark" width="auto" @on-select="selectMenu">
          <Submenu :name="obj.menuCode" v-for="(obj,i) in menuList">
            <template slot="title">
              {{obj.menuName}}
            </template>
            <MenuItem :name="o.menuCode" v-for="(o,j) in obj.sysMenuList">
              {{o.menuName}}
            </MenuItem>
          </Submenu>
        </Menu>
      </Sider>

      <Layout :style="{background: '#EEEEEE'}">
        <!--右侧的 Header-->
        <Header :style="{padding: 0}" class="layout-header-bar">
          <!--左侧收缩-->
          <!--<Icon @click.native="collapsedSider"
                :class="rotateIcon"
                :style="{margin: '0 20px'}"
                type="md-menu"
                size="24">
          </Icon>-->
          <div class="welcome">

            <div class="name">
              <span style="color: red">欢迎您</span>
              <span style="font-size: 20px">{{this.userInfo.userName}}</span>
            </div>
            <div class="signOut" @click="signOut">
            </div>
          </div>
        </Header>

        <!--右侧的 内容-->
        <Content :style="{margin: '10px 0px 0px 10px', background: '#FFF', minHeight: '260px'}">
          <router-view/>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<script>
  import {
    delCookie
  } from "@/tools/cookie";

  export default {
    name: "",
    components: {},
    data() {
      return {
        //是否缩进
        isCollapsed: false,
        //菜单列表
        menuList: [],
        //显示面板
        flag: "chart",
        //传给 导航栏
        tab: ""
      }
    },
    computed: {
      //点击 触发左侧侧边栏
      rotateIcon() {
        return [
          'menu-icon',
          this.isCollapsed ? 'rotate-icon' : ''
        ];
      },
      userInfo() {
        return this.Store.getters.getUserInfo;
      },
    },
    methods: {
      collapsedSider() {
        //改变 Sider 展开-收起状态。
        this.$refs.side.toggleCollapse();
      },
      //退出
      signOut: function () {
        //删除 sessionStorage
        window.sessionStorage.clear();
        //删除 cookie
        delCookie("isLogin");
        delCookie("token");
        delCookie("userInfo");

        //刷新页面到首页
        this.$emit("my-event-app-login", false)
        window.location.replace("/")
      },
      //选中折叠菜单
      selectMenu: function (name) {
        switch (name) {
          //轮播图
          case "rotationChart":
            this.$router.push("/chart");
            break;

          //课程
          case "course":
            this.$router.push("/subject");
            break;
          //问题
          case "question":
            this.$router.push("/question");
            break;

          //如何使用
          case "howUse":
            this.$router.push("/howUse");
            break;
          //会员权益
          case "vip":
            this.$router.push("/vip");
            break;
          //线下辅导
          case "teacher":
            this.$router.push("/teacher");
            break;
          //建议反馈
          case "suggestion":
            this.$router.push("/suggestion");
            break;
          //程序员笑话
          case "joke":
            this.$router.push("/joke");
            break;
          //码农心声
          case "interview":
            this.$router.push("/interview");
            break;
          //996.icu
          case "icu":
            this.$router.push("/icu");
            break;
          //爱心
          case "love":
            this.$router.push("/love");
            break;
          //面试
          case "offer":
            this.$router.push("/offer");
            break;

          //账户
          case "account":
            this.$router.push("/account");
            break;
          //角色
          case "role":
            this.$router.push("/role");
            break;
          //菜单
          case "menu":
            this.$router.push("/menu");
            break;
          //文件
          case "file":
            this.$router.push("/file");
            break;
        }
      },
      //页面加载
      init: function () {
        //查询菜单列表
        this.axios.get(`/login/sysMenu/sysMenuList/${this.userInfo.userId}`)
          .then(resp => {
            let list = resp.data.data;
            this.menuList = list;
          })
      }
    },
    mounted() {
      this.init();
    }
  }
</script>

<style scoped>
  .home {
    height: 100vh;
  }

  .rotate-icon {
    transform: rotate(-90deg);
  }

  /* header */
  .layout-header-bar {
    background: #FFFFFF;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  }

  .welcome {
    float: right;
  }

  .welcome .name,
  .welcome .signOut {
    float: left;
  }

  .welcome .signOut {
    border: 1px solid #d5d5d5;
    margin: 14px 30px 0px 40px;
    width: 40px;
    height: 40px;
    background-image: url("../../assets/home/signOut.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }
</style>
